<template>
	<view class="item" :style="style">
		<view class="top">
			<view class="time">{{ orderItem.orderTime | parseTime }}</view>
			<view class="msg" v-if="type == '0'">待付款</view>
			<view class="msg" v-if="type == '1'">待发货</view>
			<view class="msg" v-if="type == '2'">待收货</view>
			<view class="msg" v-if="type == '3'">已完成</view>
			<view class="msg" v-if="type == '4'">已取消</view>
			<view class="msg" v-if="type == '5' && orderItem.refundStatus == 'SUCCESS'">退款成功</view>
			<view class="msg" v-else-if="type == '5' && orderItem.refundStatus == 'CLOSED'">退款关闭</view>
			<view class="msg" v-else-if="type == '5' && orderItem.refundStatus == 'PROCESSING'">退款处理中</view>
			<view class="msg" v-else-if="type == '5' && orderItem.refundStatus == 'ABNORMAL'">退款异常</view>
			<view class="msg" v-else-if="type == '5' && orderItem.refundStatus == null">已退款</view>
		</view>
		<view class="center" @click="toDetail">
			<view class="pic" v-for="(item,index) in imageList" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</view>
			<view class="allInfo">
				<view class="price" v-if="type != '5' || orderItem.refundStatus == null">¥{{ orderItem.totalAmount | parseMoney }}</view>
				<view class="price" v-else>¥{{ orderItem.refundMoney | parseMoney}}</view><!-- 此处为售后记录展示的列表组件 -->
				<view class="total" v-if="type != '5' || orderItem.refundStatus == null">共{{ orderItem.totalNumber }}件</view>
			</view>
		</view>
<!-- 		<view class="footer" v-if="type != '0'">
			合计实付：<text style="font-weight: 500;color: #FF4F30;">¥{{ orderItem.payAmount | parseMoney }}</text>
		</view> -->
		<view class="footer" v-if="type == '0'">
			<view class="bg">
				<van-count-down :time="time || 0" format="mm分ss秒" @finish="$emit('refreshPage')" /><text style="margin-left: 20rpx;">后订单关闭，请及时付款</text>
			</view>
		</view>
		<view class="bottom">
			<!-- <view class="btn" v-if="type == '2'">查看物流</view> -->
			<view class="btn red" v-if="type == '2'" @click="enterRec">确认收货</view>
			<!-- <view class="btn red" v-if="type == '3'">再次购买</view> -->
			<view class="btn" v-if="type == '0'" @click="cancelOrder">取消订单</view>
			<view class="btn red" style="background-color: #FF1642;color: #fff;" v-if="type == '0'" @click="toPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	import App from "@/App.vue"
	import { reqCancelOrder, reqPayAgain, reqEnterOrderStatus, reqEnterOrderRec } from "@/apis/order.js"
	import dayjs from 'dayjs';
	export default {
		name: "OrderItem",
		props: {
			type: {
				type: String, // 5 全部；0 待付款；1 待发货；2 待收货；3 已完成
				default () {
					return "0";
				}
			},
			style: {
				type: String,
				default () {
					return "";
				}
			},
			orderItem: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		computed: {
			imageList() {
				return this.orderItem.imgUrlList?.slice(0, 4);
			},
			time() {
				if (this.orderItem?.status == '0') {
					let nowTime = Date.now();
					let dayJsNowTime = dayjs(nowTime);
					let dayJsEneTIme = dayjs(this.orderItem?.orderTime);
					let guoquTime = dayJsNowTime.diff(dayJsEneTIme, 'millisecond'); // 已经过去的时间
					let shengyuTime = (10 * 60 + 5) * 1000 - guoquTime;
					if (shengyuTime >= 0) {
						return shengyuTime
					} else {
						return 0;
					}
				} else {
					return 0;
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toDetail() {
				if(this.type == '5' && this.orderItem.refundStatus != null){
					uni.navigateTo({ url: `/packageA/pages/serviceDetail/serviceDetail?id=${this.orderItem.id}` })
				} else {
					uni.navigateTo({ url: `/packageA/pages/orderDetail/orderDetail?type=${this.orderItem.status}&id=${this.orderItem.id}` })
				}
			},
			cancelOrder() {
				uni.showModal({
					content: '是否取消该订单?',
					success: async (res) => {
						if (res.confirm) {
							let res1 = await reqCancelOrder({ id: this.orderItem.id })
							console.log(res1);
							if (res1.code === 200) {
								this.$emit('refreshPage');
							}
						} else if (res.cancel) {
							console.log('取消');
							//TODO
						}
					}
				})
			},
			async toPay() {
				let res = await reqPayAgain({ id: this.orderItem.id });
				if (res.code === 200) {
					let data = res.data;
					wx.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.packageInfo,
						signType: data.signType,
						paySign: data.paySign,
						success: (suc) => {
							// 直接支付
							this.$emit('changePage');
						},
						fail: (error) => {
							// 取消支付
						},
						complete: (com) => {
							console.log('支付拉起结束', com);
						}
					})
				}
			},
			async enterRec() {
				let {id,wechatNo} = this.orderItem;
				uni.showLoading({title:'加载中'});
				let res = await reqEnterOrderStatus({id,wechatNo});
				if(res.code === 200){
					setTimeout(()=>{
						uni.hideLoading();
					},5000)
					if (wx.openBusinessView) {
						wx.openBusinessView({
							businessType: 'weappOrderConfirm',
							extraData: {
								transaction_id: wechatNo
							},
							success: async (suc) => {
								//dosomething
								console.log(suc);
								let res1 = await reqEnterOrderRec({id,wechatNo});
								if(res1.code === 200){
									this.$emit('refreshPage');
									uni.utils.toast("确认收货成功");
								}
								// if(suc.extraData.status === "cancel"){
								// 	uni.utils.toast("用户取消收货");
								// }else if(suc.extraData.status === "fail"){
								// 	uni.utils.toast(suc.extraData.errormsg);
								// }else if(suc.extraData.status === "success"){
								// 	let res1 = await reqEnterOrderRec({id,wechatNo});
								// 	if(res1.code === 200){
								// 		this.$emit('refreshPage');
								// 		uni.utils.toast("确认收货成功");
								// 	}
								// }
							},
							fail: (e) => {
								console.log(e);
								uni.utils.toast("确认收货失败")
							},
							complete:(c)=> {
								console.log('c',c);
								//dosomething
							}
						});
					} else {
						//引导用户升级微信版本
						uni.showToast({ title: "微信版本过低，请升级微信版本", duration: 3000, icon: "none" });
					}
				}				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;

		.top {
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
			font-size: 28rpx;

			.msg {
				color: #FF1642;
			}
		}

		.center {
			padding: 24rpx;
			position: relative;

			.pic {
				width: 145rpx;
				height: 145rpx;
				display: inline-block;
				margin-right: 16rpx;
				border-radius: 12rpx;

				image {
					width: 100%;
					border-radius: 12rpx;
					height: 100%;
				}
			}

			.allInfo {
				position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				width: 170rpx;
				height: 100%;
				right: 0;
				bottom: 0;

				.price {
					font-size: 32rpx;
					color: #FF4F30;
					font-weight: bold;
				}

				.total {
					font-size: 24rpx;
				}
			}
		}

		.footer {
			width: 100%;
			text-align: right;
			padding-right: 24rpx;
			box-sizing: border-box;
			padding-bottom: 24rpx;

			/deep/ .bg {
				display: flex;
				background-color: #f5f5f5;
				padding: 24rpx;
				margin-left: 24rpx;
				text-align: left;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
				align-items: center;

				.van-count-down {
					color: #FF1642 !important;
					font-size: 28rpx !important;
				}
			}
		}

		.bottom {
			width: 100%;
			text-align: right;
			padding-right: 24rpx;
			box-sizing: border-box;

			.btn {
				display: inline-block;
				margin-bottom: 24rpx;
				width: 168rpx;
				height: 64rpx;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				border: 2rpx solid #DDDDDD;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 64rpx;
				text-align: center;
				margin-left: 48rpx;

				&.red {
					color: #FF1642;
					border: 2rpx solid #FF1642;
				}
			}
		}
	}
</style>